<template>
  <div class="quarterlyContainer h-full" v-clickOutSide="clickOutSide">
    <div @click="showPickerPanel" class="h-full">
      <el-input
        size="small"
        v-model="choseValue"
        style="width: 100%"
        :readonly="true"
        class="!w-200px h-full"
        placeholder="请选择"
      >
        <template #prefix>
          <el-icon :size="14" class="el-input__icon"><calendar /></el-icon>
        </template>
      </el-input>
    </div>
    <div
      v-show="showPanel"
      class="quarterly-body el-picker-panel el-date-picker el-popper is-light"
    >
      <div class="el-picker-panel__body-wrapper">
        <div class="el-picker-panel__body">
          <div
            class="el-date-picker__header el-date-picker__header--bordered flex justify-between items-center"
          >
            <el-button type="text" @click="prevYear">
              <el-icon><DArrowLeft /></el-icon>
            </el-button>
            <span role="button" class="el-date-picker__header-label">{{ year }}</span>
            <el-button type="text" @click="nextYear">
              <el-icon><DArrowRight /></el-icon>
            </el-button>
          </div>
          <div class="el-picker-panel__content">
            <table class="el-month-table">
              <tr v-for="(dateList, index) in fullDate" :key="index">
                <td v-for="(item, index) in dateList" :key="index">
                  <a
                    class="cell"
                    :class="{
                      'text-primary-color': choseValue.includes(item.name),
                      'cursor-not-allowed disabled-bg': isDisabledData(item.value)
                    }"
                    @click="!isDisabledData(item.value) && selectQuarter(item.name)"
                    >{{ item.name }}</a
                  >
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div x-arrow="" class="popper__arrow" style="left: 35px"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
const showPanel = ref(false)
const year = ref(new Date().getFullYear())
const fullDate = ref([
  [
    { name: '第一季度', value: [0, 1, 2] },
    { name: '第二季度', value: [3, 4, 5] }
  ],
  [
    { name: '第三季度', value: [6, 7, 8] },
    { name: '第四季度', value: [9, 10, 11] }
  ]
])
const choseValue = ref('')

const isDisabledData = computed(() => (value) => {
  const currentYear = new Date().getFullYear()
  if (year.value > currentYear) {
    return true
  }
  if (year.value === currentYear && isThanCurrentMonth(value)) {
    return true
  }
  return false
})

const isThanCurrentMonth = (value) => {
  const currentMonth = new Date().getMonth()
  return value.every((e) => e > currentMonth)
}

const showPickerPanel = () => {
  showPanel.value = !showPanel.value
}

const prevYear = () => {
  year.value = year.value - 1
}
const nextYear = () => {
  year.value = year.value + 1
}

const selectQuarter = (item) => {
  switch (item) {
    case '第一季度':
      choseValue.value = year.value + '-' + '第一季度'
      break
    case '第二季度':
      choseValue.value = year.value + '-' + '第二季度'
      break
    case '第三季度':
      choseValue.value = year.value + '-' + '第三季度'
      break
    case '第四季度':
      choseValue.value = year.value + '-' + '第四季度'
      break
  }
  showPanel.value = false
  emit('change', choseValue.value)
}

const clickOutSide = () => {
  showPanel.value = false
}

watch(
  () => props.modelValue,
  (value) => {
    choseValue.value = value
  }
)

onMounted(() => {
  choseValue.value = props.modelValue
})
</script>
<style lang="scss" scoped>
.quarterlyContainer {
  width: 250px;
  position: relative;
  .quarterly-body {
    position: absolute;
    z-index: 2079;
  }
  .el-popper[x-placement^='bottom'] {
    margin-top: 12px;
  }
}

.text-primary-color {
  color: var(--el-color-primary) !important;
}

.el-icon {
  color: var(--el-datepicker-icon-color);
  :hover {
    color: var(--el-color-primary);
  }
}

.disabled-bg {
  color: #a8abb2 !important;
  background-color: #f5f7fa;
}
:deep(.el-input__wrapper) {
  padding: 1px 11px !important;
}
:deep(input::placeholder) {
  font-size: 14px;
}
</style>
